<template>
	<!-- 我的消息 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view @click="$tool.goBack()" class="f0 p-3">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.i041}}
				</view>
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="h32">

		</view>
		<template v-for="(item,index) in list">
			<view class="Wrap mx-3 A-Regular p-3" :class="model=='light'?'WrapLight':''">
				<view class="title A-Medium">
					{{i18n.i042}}
				</view>
				<view class="desc">
					{{item.content}}
				</view>
			</view>
			<view class="time A-Regular text-alignC my-3" :class="model=='light'?'timeLight':''">
				{{item.createTime}}
			</view>
		</template>
	</view>
</template>

<script>
	import {
		noticeList
	} from '@/core/api/index.js';
	export default {
		data() {
			return {
				pageNo:1,
				pageSize:15,
				list:[],
			}
		},
		onLoad() {
			this.getNoticeList();
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			i18n() {
				return this.$t('index');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		onReachBottom() {
			this.pageNo++;
			this.getNoticeList();
		},
		methods:{
			getNoticeList(){
				noticeList({
					pageNo:this.pageNo,
					pageSize:this.pageSize
				}).then(res=>{
					let list = res.result.records;
					if(this.pageNo==1){
						this.list = list;
					}else{
						if(list.length==0){
							this.pageNo--;
						}else{
							this.list.push(...list);
						}
					}
					// for(let i=0;i<list.length;i++){
					// 	this.noticeText += list[i].content;
					// }
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.h32 {
		height: 32rpx;
	}

	.Wrap {
		background: #16181C;
		border-radius: 30rpx;
		border: 2rpx solid #1F2128;

		.title {
			font-size: 32rpx;
			color: #F7F7F7;
		}

		.desc {
			font-size: 28rpx;
			color: #7F838D;
			margin-top: 12rpx;
		}
	}

	.time {
		font-size: 24rpx;
		color: #7F838D;
	}

	.timeLight {
		color: #B5B7BF;
	}

	.WrapLight {
		background: #fff;
		border: none;

		.title {
			color: #0E0F11;
		}
	}
</style>